/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import React, { PropsWithChildren, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
import actions from '@/store/actions/home';
import { CombinedState } from '@/store/reducers';
import { HomeState } from '@/store/reducers/home';
import HomeHeader from '@/components/homeheader';
import HomeSlider from '@/components/HomeSlider';

import LessonList from '@/components/LessonList';
import { loadMore, downRefresh, store, debounce, throttle } from "@/utils";

import './index.scss';
const mapStateToProps = (state: CombinedState): HomeState => state.home;
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;

interface Params {}
type Props = PropsWithChildren<RouteComponentProps<Params> & StateProps & DispatchProps>;
function Home(props: Props) {
  const homeContainerRef = useRef(null);
  const lessonListRef = useRef(null);

  useEffect(()=>{
    loadMore(homeContainerRef.current, props.getLessons);
    downRefresh(homeContainerRef.current, props.refreshLessons);
    homeContainerRef.current.addEventListener("scroll", () => {
      lessonListRef.current();
    })
    if(props.lessons){
      homeContainerRef.current.scrollTop = store.get("homeScrollTop");
    }
    return () => {
      store.set("homeScrollTop", homeContainerRef.current.scrollTop);
    };
  },[])

  return (
    <>
      <HomeHeader
        currentCategory={props.currentCategory}
        setCurrentCategory={props.setCurrentCategory}
      />
      <div className="home-container" ref={homeContainerRef}>
        <HomeSlider sliders={props.sliders} getSliders={props.getSliders} />
        <LessonList ref={lessonListRef} container={homeContainerRef} lessons={props.lessons} getLessons={props.getLessons} />
      </div>
    </>
  );
}

export default connect(
  mapStateToProps,
  actions
)(Home);
